<template>
    <div class="dashboard">
      <!-- Header -->
      <Header :username="currentUser" @logout="handleLogout" />
  
      <div class="content">
        <el-tabs v-model="activeTab" type="card">
          <!-- 首页 Tab -->
          <el-tab-pane label="首页" name="home">
            <Home />
          </el-tab-pane>
  
          <!-- 住院记录 Tab -->
          <el-tab-pane label="住院记录" name="inpatients">
            <Inpatients />
          </el-tab-pane>
  
          <!-- 门诊记录 Tab -->
          <el-tab-pane label="门诊记录" name="outpatients">
            <Outpatients />
          </el-tab-pane>
  
          <!-- 预约记录 Tab -->
          <el-tab-pane label="预约记录" name="appointments">
            <Appointment />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import Header from './Header.vue'
  import Home from './Home.vue'
  import Inpatients from './Inpatients.vue'
  import Outpatients from './Outpatients.vue'
  import Appointment from './Appointment.vue'
  
  const router = useRouter()
  const currentUser = ref('')
  const role = ref('')
  const activeTab = ref('home')  // 默认为首页 Tab
  
  onMounted(() => {
    currentUser.value = localStorage.getItem('username') || '未知用户'
    role.value = localStorage.getItem('role') || 'guest'
  
    // 如果用户未登录或角色为 guest，跳转到登录页面
    if (!currentUser.value || role.value === 'guest') {
      router.push('/')
    }
  })
  
  const handleLogout = () => {
    localStorage.removeItem('username')
    localStorage.removeItem('role')
    router.push('/')
  }
  </script>
  
  <style scoped lang="scss">
  .dashboard {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  
    .content {
      flex: 1;
      padding: 20px;
      background: #f5f5f5;
    }
  }
  </style>
  